<template>
  <section id="contact" class="contact">
    <div class="contact-background">
      <div class="contact-pattern"></div>
    </div>

    <div class="container">
      <div class="section-header">
        <h2 class="section-title">联系我</h2>
        <p class="section-subtitle">
          有任何项目合作或技术交流的需求？欢迎随时联系我
        </p>
      </div>

      <div class="contact-content">
        <div class="contact-info">
          <h3 class="contact-heading"><MessageOutlined /> 联系方式</h3>
          <div class="contact-methods">
            <a
              :href="`mailto:${contactInfo.email}`"
              class="contact-method"
              @mouseenter="hoverMethod = 'email'"
              @mouseleave="hoverMethod = null"
            >
              <div class="method-icon" :class="{ 'method-icon-active': hoverMethod === 'email' }">
                <MailOutlined />
              </div>
              <div class="method-content">
                <h4 class="method-title">邮箱联系</h4>
                <p class="method-value">{{ contactInfo.email }}</p>
                <p class="method-description">工作日24小时内回复</p>
              </div>
            </a>

            <a
              :href="`tel:${contactInfo.phone}`"
              class="contact-method"
              @mouseenter="hoverMethod = 'phone'"
              @mouseleave="hoverMethod = null"
            >
              <div class="method-icon" :class="{ 'method-icon-active': hoverMethod === 'phone' }">
                <PhoneOutlined />
              </div>
              <div class="method-content">
                <h4 class="method-title">电话咨询</h4>
                <p class="method-value">{{ contactInfo.phone }}</p>
                <p class="method-description">工作日 9:00-18:00</p>
              </div>
            </a>

            <a
              :href="contactInfo.wechat"
              target="_blank"
              rel="noopener noreferrer"
              class="contact-method"
              @mouseenter="hoverMethod = 'wechat'"
              @mouseleave="hoverMethod = null"
            >
              <div class="method-icon" :class="{ 'method-icon-active': hoverMethod === 'wechat' }">
                <WechatOutlined />
              </div>
              <div class="method-content">
                <h4 class="method-title">微信联系</h4>
                <p class="method-value">{{ contactInfo.wechatId }}</p>
                <p class="method-description">扫码添加好友</p>
              </div>
            </a>

            <a
              :href="contactInfo.github"
              target="_blank"
              rel="noopener noreferrer"
              class="contact-method"
              @mouseenter="hoverMethod = 'github'"
              @mouseleave="hoverMethod = null"
            >
              <div class="method-icon" :class="{ 'method-icon-active': hoverMethod === 'github' }">
                <GithubOutlined />
              </div>
              <div class="method-content">
                <h4 class="method-title">GitHub</h4>
                <p class="method-value">{{ contactInfo.githubUser }}</p>
                <p class="method-description">查看我的开源项目</p>
              </div>
            </a>
          </div>

          <div class="availability-status">
            <div class="status-indicator">
              <span class="status-dot"></span>
              <span class="status-text">可接受新项目合作</span>
            </div>
            <p class="availability-note">
              目前有空余时间接受新的项目合作，预计响应时间：2小时内
            </p>
          </div>
        </div>

        <div class="contact-form-container">
          <h3 class="form-heading"><FormOutlined /> 发送消息</h3>
          <form class="contact-form" @submit.prevent="handleSubmit" ref="formRef">
            <div class="form-row">
              <div class="form-group">
                <label for="name" class="form-label">
                  <UserOutlined /> 您的姓名 *</label>
                <input
                  id="name"
                  v-model="formData.name"
                  type="text"
                  class="form-input"
                  :class="{ 'form-input-error': errors.name }"
                  placeholder="请输入您的姓名"
                  required
                  @blur="validateField('name')"
                />
                <span v-if="errors.name" class="form-error">{{ errors.name }}</span>
              </div>

              <div class="form-group">
                <label for="email" class="form-label">
                  <MailOutlined /> 您的邮箱 *</label>
                <input
                  id="email"
                  v-model="formData.email"
                  type="email"
                  class="form-input"
                  :class="{ 'form-input-error': errors.email }"
                  placeholder="请输入您的邮箱地址"
                  required
                  @blur="validateField('email')"
                />
                <span v-if="errors.email" class="form-error">{{ errors.email }}</span>
              </div>
            </div>

            <div class="form-group">
              <label for="subject" class="form-label">
                <EditOutlined /> 主题 *</label>
              <input
                id="subject"
                v-model="formData.subject"
                type="text"
                class="form-input"
                :class="{ 'form-input-error': errors.subject }"
                placeholder="请输入消息主题"
                required
                @blur="validateField('subject')"
              />
              <span v-if="errors.subject" class="form-error">{{ errors.subject }}</span>
            </div>

            <div class="form-group">
              <label for="message" class="form-label">
                <MessageOutlined /> 留言内容 *</label>
              <textarea
                id="message"
                v-model="formData.message"
                class="form-textarea"
                :class="{ 'form-input-error': errors.message }"
                placeholder="请详细描述您的需求或想法..."
                rows="5"
                required
                @blur="validateField('message')"
              ></textarea>
              <span v-if="errors.message" class="form-error">{{ errors.message }}</span>
            </div>

            <div class="form-group">
              <div class="form-checkbox-group">
                <input
                  id="privacy"
                  v-model="formData.privacy"
                  type="checkbox"
                  class="form-checkbox"
                  required
                />
                <label for="privacy" class="form-checkbox-label">
                  我已阅读并同意
                  <a href="#" @click.prevent="showPrivacyPolicy" class="privacy-link">隐私政策</a>
                </label>
              </div>
              <span v-if="errors.privacy" class="form-error">{{ errors.privacy }}</span>
            </div>

            <div class="form-actions">
              <a-button
                type="primary"
                size="large"
                html-type="submit"
                class="submit-button"
                :loading="isSubmitting"
                :disabled="isSubmitting"
              >
                <template #icon><SendOutlined /></template>
                {{ isSubmitting ? '发送中...' : '发送消息' }}
              </a-button>

              <a-button
                size="large"
                class="reset-button"
                @click="handleReset"
                :disabled="isSubmitting"
              >
                <template #icon><ReloadOutlined /></template>
                重置表单
              </a-button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import {
  MessageOutlined,
  MailOutlined,
  PhoneOutlined,
  WechatOutlined,
  GithubOutlined,
  UserOutlined,
  FormOutlined,
  EditOutlined,
  SendOutlined,
  ReloadOutlined
} from '@ant-design/icons-vue'

interface ContactInfo {
  email: string
  phone: string
  wechat: string
  wechatId: string
  github: string
  githubUser: string
}

interface FormData {
  name: string
  email: string
  subject: string
  message: string
  privacy: boolean
}

interface FormErrors {
  name?: string
  email?: string
  subject?: string
  message?: string
  privacy?: string
}

const hoverMethod = ref<string | null>(null)
const isSubmitting = ref(false)

const contactInfo: ContactInfo = {
  email: 'alex.chen@example.com',
  phone: '+86 138 0013 8000',
  wechat: 'https://example.com/wechat',
  wechatId: 'Alex_Chen_Dev',
  github: 'https://github.com/alexchen',
  githubUser: '@alexchen'
}

const formData = reactive<FormData>({
  name: '',
  email: '',
  subject: '',
  message: '',
  privacy: false
})

const errors = reactive<FormErrors>({})

const validateField = (field: keyof FormData) => {
  delete errors[field]

  switch (field) {
    case 'name':
      if (!formData.name.trim()) {
        errors.name = '请输入您的姓名'
      } else if (formData.name.trim().length < 2) {
        errors.name = '姓名至少需要2个字符'
      }
      break
    case 'email':
      if (!formData.email.trim()) {
        errors.email = '请输入您的邮箱地址'
      } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
        errors.email = '请输入有效的邮箱地址'
      }
      break
    case 'subject':
      if (!formData.subject.trim()) {
        errors.subject = '请输入消息主题'
      }
      break
    case 'message':
      if (!formData.message.trim()) {
        errors.message = '请输入留言内容'
      } else if (formData.message.trim().length < 10) {
        errors.message = '留言内容至少需要10个字符'
      }
      break
    case 'privacy':
      if (!formData.privacy) {
        errors.privacy = '请同意隐私政策'
      }
      break
  }
}

const validateForm = (): boolean => {
  Object.keys(formData).forEach(key => {
    validateField(key as keyof FormData)
  })
  return Object.keys(errors).length === 0
}

const handleSubmit = async () => {
  if (!validateForm()) {
    message.error('请检查表单内容')
    return
  }

  isSubmitting.value = true

  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 2000))

    message.success('消息发送成功！我会尽快回复您。')
    handleReset()
  } catch (error) {
    message.error('发送失败，请稍后重试')
  } finally {
    isSubmitting.value = false
  }
}

const handleReset = () => {
  Object.assign(formData, {
    name: '',
    email: '',
    subject: '',
    message: '',
    privacy: false
  })
  Object.keys(errors).forEach(key => {
    delete errors[key as keyof FormErrors]
  })
}

const showPrivacyPolicy = () => {
  message.info('隐私政策：您的信息将被严格保密，仅用于回复您的咨询。')
}
</script>

<style scoped>
.contact {
  position: relative;
  padding: 6rem 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.contact-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1;
}

.contact-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 2;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: white;
}

.section-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.contact-info,
.contact-form-container {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-heading,
.form-heading {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.contact-method {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: white;
  padding: 1rem;
  border-radius: 15px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.1);
}

.contact-method:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(10px);
}

.method-icon {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.method-icon-active {
  background: white;
  color: var(--primary-color);
}

.method-content {
  flex: 1;
}

.method-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.method-value {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 0.25rem;
}

.method-description {
  font-size: 0.9rem;
  opacity: 0.7;
  margin: 0;
}

.availability-status {
  text-align: center;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
}

.status-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.status-dot {
  width: 12px;
  height: 12px;
  background: #52c41a;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.status-text {
  font-weight: 600;
}

.availability-note {
  font-size: 0.9rem;
  opacity: 0.8;
  margin: 0;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(82, 196, 26, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(82, 196, 26, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(82, 196, 26, 0);
  }
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-label {
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.form-input,
.form-textarea {
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: white;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.form-input-error {
  border-color: #ff4d4f;
  background: rgba(255, 77, 79, 0.1);
}

.form-error {
  font-size: 0.8rem;
  color: #ff4d4f;
  margin-top: 0.25rem;
}

.form-checkbox-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-checkbox {
  width: 18px;
  height: 18px;
  accent-color: white;
}

.form-checkbox-label {
  font-size: 0.9rem;
  cursor: pointer;
}

.privacy-link {
  color: white;
  text-decoration: underline;
}

.privacy-link:hover {
  text-decoration: none;
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
}

.submit-button,
.reset-button {
  min-width: 120px;
  height: 45px;
  font-size: 1rem;
  border-radius: 25px;
  transition: all 0.3s ease;
}

.submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.reset-button {
  background: transparent;
  border: 1px solid white;
  color: white;
}

.reset-button:hover {
  background: white;
  color: var(--primary-color);
}

@media (max-width: 768px) {
  .contact-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-actions {
    flex-direction: column;
  }

  .contact-method {
    flex-direction: column;
    text-align: center;
  }

  .section-title {
    font-size: 2rem;
  }
}
</style>